<template>
    <div class="top-count ">
      <div class="top-count-item" v-for="(item, index) in countList" :key="index">
        <div class="top-count-item-inner number-box">
          <p>{{item.name}}</p>
          <div class="number-value" :class="(item.name=='近30天开机率' || item.name=='近7天开机率')?'actived-style':''">
            <p v-if="!item.value">----</p>
            <div v-else>
              <ComNumberScroll
                  v-if="item.name=='录入终端总量' || item.name=='累计激活终端' || item.name=='近30天活跃终端' || item.name=='近7天活跃终端'"
                  :start="0" 
                  :end="item.value"
                  :autoPlay="true" 
                  :duration="1000"
                  :default="0"
                  showType="no-bg"/>
              <span v-else> {{item.value}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { getSummary } from '@/api/tms/tms.js'
import {getToday } from '@/utils/func/util'
import { ref, onMounted } from "vue";
import ComNumberScroll from '@/components/public/ComNumberScroll/ComNumberScroll.vue';
const countList = ref([
    { name:'录入终端总量',value: 0 },
    { name:'累计激活终端',value: 0 },
    { name:'近30天活跃终端',value: 0 },
    { name:'近30天开机率',value: 0 },
    { name:'近7天活跃终端',value: 0 },
    { name:'近7天开机率',value: 0 },
  ]);

const loadData = () => {
    getSummary({statDate: getToday()}).then(res => {
      const { data } = res
      countList.value.forEach(v => {
          switch(v.name){
            case '录入终端总量':
              v.value = data.totalTerms
              break;
            case '累计激活终端':
              v.value = data.totalActiveTerms
              break;
            case '近30天活跃终端':
              v.value = data.activeTermsForPast30Days
              break;
            case '近30天开机率':
              v.value = data.percentageForPast30Days
              break;
            case '近7天活跃终端':
              v.value = data.activeTermsForPast7Days
              break;
              case '近7天开机率':
              v.value = data.percentageForPast7Days
              break;
          }
        })
    })
  }
  onMounted(() => {
    loadData()
  })  
</script>
<style lang="scss" scoped>
.top-count {
    width: 100%;
    padding-top: 90px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    margin-bottom: 28px;
    &-item{
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      margin-right: 30px;
      background: url('/src/assets/tms-today-little.png') no-repeat 0 0;
      background-size: 100% 100%;
      text-align: center;
      &:last-child{
        margin-right: 0px;
      }
      
      .number-box{
        p{
          font-size: 24px;
          color: #FFFFFF;
          opacity:  0.7;
          font-weight: 500;
        }
        .number-value{
          font-size: 36px;
          color: #FFFFFF;
          font-weight: 500;
        }
      }
    }
  }
  .actived-style{
    color: #FFD042 !important;
  }
</style>